<template>
	<view class="page" :style="themeColor">
		<view class="flex align-stretch benben-position-layout flex vip_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex  justify-between flex-sub vip_fd0_0'>
				<view class='vip_fd0_0_c0' style="padding-top: 16rpx;">
					<person></person>
				</view>
				<view class='flex align-center'>
					<text class='vip_fd0_0_c1_c0'>我的会员</text>
				</view>
				<view class='flex align-center justify-end vip_fd0_0_c0'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>

		<view style="padding: 8rpx 30rpx;background: #fff;">
			<back></back>
		</view>
		
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#6A0002"></u-loading>
			<view class="loading_text">加载中</view>
		</view>
		<template>
			<!---flex布局flex布局开始-->
			<view class="vip_flex_2_content" v-if="user_vip > 0">
				<view class="vip_flex_2_content_bg">
					<image :src='STATIC_URL+"115.png"' mode=""></image>
				</view>
				<view class="flex flex-direction align-stretch benben-flex-layout vip_flex_2">
					<view class='flex flex-direction flex-wrap align-stretch vip_fd2_0_c0'>
						<view class='flex flex-direction align-stretch vip_fd2_0_c0_c0'
							:style="{background: `url(${myVip.app_img}) no-repeat`}">
							<view class='vip_fd2_0_c0_c0_c0'>
								<view class='vip_fd2_0_c0_c0_c0_c0'>{{myVip.name}}</view>
								<view class="vip_date">
									<text>有效期：</text>
									<text>{{myVip.user_vip_last_time}}</text>
								</view>
							</view>
							<!-- <view class='flex flex-wrap align-center vip_fd2_0_c0_c0_c1'>
								<text class='vip_fd2_0_c0_c0_c1_c0'>自购买之日起，{{item.times}}个月内有效</text>
							</view> -->
							<!-- mySpecies/mySpecies -->
							<view class='flex flex-wrap align-center justify-between vip_fd2_0_c0_c0_c2' @tap.stop="handleJumpDiy" data-type="navigateTo"
					:data-url="`/pages/qbgl/mySpecies/mySpecies`">
								<view class="">
									<text class='vip_fd2_0_c0_c0_c2_c0'>{{Number(usefInfo.user_money)}}</text>
									<text class='vip_fd2_0_c0_c0_c2_c1'>金币</text>
								</view>
								<view style="padding-right: 24rpx;">
									<u-icon name="arrow-right" color="#fff" size="26"></u-icon>
								</view>
							</view>
						</view>
						<text class='vip_fd2_0_c0_c1'>权益</text>
						<view class='flex flex-wrap align-center vip_fd2_0_c0_c2'>
							<jyf-parser :html="myVip.content | richTextFormat"></jyf-parser>
						</view>
					</view>
			
				</view>
			</view>
			
			<view class="vip_list">
				<!-- <view class="vip_item active_vip">
					<view class="vip_item_1 active_vip_1">
						<image :src='STATIC_URL+"118.png"' mode="aspectFill"></image>
						<text>青铜VIP</text>
					</view>
					<view class="vip_item_2 active_vip_2">
						<text>¥100金币</text>
					</view>
					<view class="vip_item_3 active_vip_3">
						<text>12个月</text>
					</view>
				</view> -->
				<view class="vip_item" :class="selectIndex == index ? 'active_vip' : ''" v-for="(item, index) in ruler"
					:key="index" @tap.stop="selectRuler(index)">
					<view class="vip_item_1" :class="selectIndex == index ? 'active_vip_1' : ''">
						<image :src='item.thumb' mode="aspectFill"></image>
						<text>{{item.name}}</text>
					</view>
					<view class="vip_item_2" :class="selectIndex == index ? 'active_vip_2' : ''">
						<text>¥{{item.money}}金币</text>
					</view>
					<view class="vip_item_3" :class="selectIndex == index ? 'active_vip_3' : ''">
						<text>{{item.times}}个月</text>
					</view>
				</view>
			</view>
			<view class="vip_equity">
				<view class="vip_equity_title">权益</view>
				<view class='vip_equity_content'>
					<jyf-parser :html="selectInfo.content | richTextFormat"></jyf-parser>
				</view>
			</view>
			
			<view style="height: 130rpx;"></view>
			
			
			<view class="flex flex-direction align-center justify-center benben-position-layout flex vip_flex_3" @tap.stop="popupShow()">
				<button class='vip_fd3_0'>开通会员</button>
			</view>
		</template>

		

		<!-- 购买会员确认弹框 -->
		<u-popup v-model="vip_show" mode="center" border-radius="16">
			<view class="confirm_popup">
				<view class="popup_title">
					<text></text>
					<text>购买服务确认</text>
					<image :src='STATIC_URL+"121.png"' mode="aspectFill"></image>
				</view>
				<view class="popup_cont">
					<view class="cont_item">
						<view class="popup_cont_left">
							<view>您已选择</view>
						</view>
						<view class="popup_cont_right">
							<text>{{selectInfo.name}}</text>
							<text class="cont_right_date">(有效期{{selectInfo.times}}个月)</text>
						</view>
					</view>
					<view class="cont_item">
						<view class="popup_cont_left">
							<view>服务价格</view>
						</view>
						<view class="popup_cont_right">
							<text>{{selectInfo.money}}金币</text>
						</view>
					</view>
					<view class="cont_item">
						<view class="popup_cont_left">
							<view>我的余额</view>
						</view>
						<view class="popup_cont_right">
							<text>{{Number(usefInfo.user_money)}}金币</text>
						</view>
					</view>
					<view class="cont_item">
						<view class="popup_cont_left">
							<view class="xuyao">需支付</view>
						</view>
						<view class="popup_cont_right">
							<text>{{selectInfo.money}}金币</text>
						</view>
					</view>
				</view>
				<view class="popup_bottom">
					<view class="confirm_btn" @tap.stop="payNow">立即支付</view>
				</view>
			</view>
		</u-popup>


		<!---flex布局开始-->
		<benben-popup v-model="popupShow1688203058831" :mask="true" mode='center'>
			<view class="flex flex-direction align-stretch benben-flex-layout vip_flex_311">
				<view class='flex align-center justify-center'>
					<text class='vip_fd3_0_c0'>输入支付密码</text>
				</view>
				<view class='flex align-center justify-center vip_fd3_1'>
					<benben-digital-password :box-num='6' mode='password' v-model='PayPwd'
						class-name="flex flex align-center justify-center vip_fd3_1_c0">
						<!--  @confirm="checkCodeFunc()"-->
						<template #default="{ content, active, index }">
							<view :key="index" v-if="active"
								class="flex align-center justify-center active-digital-password vip_flex_password_active_fd3_1_c0">
								{{ content }}
							</view>
							<view :key="index" v-else
								class="flex align-center justify-center vip_flex_password_noActive_fd3_1_c0">
								{{ content }}
							</view>
						</template>
					</benben-digital-password>
				</view>
				<view class='flex align-center justify-between'>
					<button class='vip_fd3_2_c0' @tap.stop="closePsd">取消</button>
					<button class='vip_fd3_2_c1' @tap.stop="checkCodeFunc()">确认</button>
					<!-- @tap.stop="goumai()" -->
				</view>
			</view>
		</benben-popup>
		<!---flex布局结束-->
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	import back from "@/components/back/index.vue"
	import person from "@/components/person/index.vue"
	export default {
		components: {
			back,
			person
		},


		data() {
			return {
				vip_show: false,
				"popupShow1688203058831": false,
				ruler: [],
				id: "", // 规则id
				"PayPwd": '',
				code: '',
				usefInfo: {},
				selectInfo: {
					content: "",
				}, // 选择的会员
				user_vip: 0, // 会员等级id
				selectIndex: 0,
				myVip: {
					content: ""
				},  // 我的会员信息
				isShow: true,
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {
			scrolltoupper() {
				console.log(111, "111")
			}
		},
		onLoad(options) {
			this.getruler()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {
			this.getuser();
		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 我的会员信息  post648147e05d5d5
			getUserVip() {
				this.$api.post(global.apiUrls.post648147e05d5d5, {

				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.myVip = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},


			popupShow() {
				this.vip_show = true;
			},
			payNow() {
				this.vip_show = false;
				this.getsetpay();
			},
			//获取信息
			async getuser() {
				let res = await this.$api.post(global.apiUrls.userinfo, {});
				if (res.data.code != 1) {
					this.$message.info(res.data.msg)
					return
				}
				this.usefInfo = res.data.data;
				if (res.data.data.user_vip == 0) {

				} else {
					this.getUserVip();
					this.user_vip = res.data.data.user_vip;
				}
				// console.log(this.usefInfo);
			},
			//获取规则
			async getruler() {
				let res = await this.$api.post(global.apiUrls.viprule, {});
				if (res.data.code != 1) {
					this.$message.info(res.data.msg)
					return
				}
				this.isShow = false;
				this.ruler = res.data.data
				if (this.ruler.length > 0) {
					this.selectInfo = this.ruler[0];
				}
				// console.log(this.ruler, 'this.ruler');
			},
			// 选择规则
			selectRuler(index) {
				this.selectIndex = index;
				this.selectInfo = this.ruler[index];
			},
			//检测是否设置支付密码
			async getsetpay() {
				let res = await this.$api.post(global.apiUrls.a6483dd30d089c, {})
				if (res.data.code != 1) {
					this.$message.info(res.data.msg)
					return
				}
				if (res.data.data.is_set == 0) {
					this.$message.info('您还没有设置支付密码');
					setTimeout(() => {
						this.$urouter.navigateTo('/pages/xtsz/setpay/setpay')
					}, 800)
					return false
				} else {
					this.popupShow1688203058831 = true;
					return true
				}
			},
			//检测支付密码是否正确
			//校验验证码
			async checkCodeFunc() {
				if (!validate(this.PayPwd, 'require')) {
					this.$message.info('支付密码不能为空');
					return false;
				}
				let res = await this.$api.post(global.apiUrls.a647218a4097c1, {
					pay_password: this.PayPwd
				})
				if (res.data.code != 1) {
					this.$message.info(res.data.msg)
					return false
				} else {
					this.goumai()
				}
			},
			closePsd() {
				this.PayPwd = '';
				this.popupShow1688203058831 = false;
			},
			//立即购买
			async goumai() {
				this.popupShow1688203058831 = false
				// this.checkCodeFunc()
				let res = await this.$api.post(global.apiUrls.getvip, {
					rule_id: this.selectInfo.id, //规则id
					password: this.PayPwd
				});
				//金币不足 跳充值
				if (res.data.code == -1) {
					this.$message.info(res.data.msg);
					this.PayPwd = "";
					setTimeout(() => (
						uni.navigateTo({
							url: '/pages/qbgl/mySpecies/mySpecies'
						})
					), 800)
					//购买成功
				} else if (res.data.code == 0) {
					this.$message.info(res.data.msg)
				} else {
					this.PayPwd = "";
					this.$message.info(res.data.msg);
					this.getuser();
					// setTimeout(() => (
					// 	uni.navigateTo({
					// 		url: `/pages/qbgl/successfullyRecharged/successfullyRecharged?money=${this.selectInfo.money}&&type=1`
					// 	})
					// ), 800)
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.confirm_popup {
		width: 600rpx;
		height: 590rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		.popup_title {
			padding: 40rpx;
			font-size: 32rpx;
			font-weight: 500;
			display: flex;
			align-items: center;
			justify-content: space-between;
			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
		.popup_cont {
			padding: 0 52rpx;
			.cont_item {
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				.popup_cont_left {
					width: 114rpx;
					margin-right: 44rpx;
					font-size: 28rpx;
					color: #666;
					.xuyao {
						color: #B21E11;
					}
				}
				.popup_cont_right {
					.cont_right_date {
						font-size: 24rpx;
						color: #999999;
						margin-left: 12rpx;
					}
				}
			}
		}
		.popup_bottom {
			padding: 40rpx;
			border-top: 1px solid #eee;
			.confirm_btn {
				width: 520rpx;
				height: 88rpx;
				background: #6A0002;
				border-radius: 44rpx;
				color: #fff;
				font-weight: 500;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.vip_equity {
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;
		margin: 24rpx 30rpx 0;

		.vip_equity_title {
			margin-bottom: 24rpx;
		}

		.vip_equity_content {
			color: #333333;
			font-size: 24rpx;
			line-height: 35rpx;
			font-weight: 400;
		}
	}

	.vip_list {
		display: flex;
		justify-content: space-between;
		padding: 0 30rpx;

		.vip_item {
			width: 216rpx;
			height: 250rpx;
			background: #F6F7F9;
			border-radius: 16rpx;
			border: 2rpx solid #BFBFBF;
			padding: 38rpx 0 0 20rpx;

			.vip_item_1 {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: bold;

				image {
					width: 52rpx;
					height: 52rpx;
					margin-right: 10rpx;
				}
			}

			.vip_item_2 {
				margin-top: 16rpx;
				color: #999999;
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
			}

			.vip_item_3 {
				margin-top: 16rpx;
				color: #999999;
				font-size: 26rpx;
				font-weight: bold;
				text-align: center;
			}
		}

		.active_vip {
			background: #FAE5E6;
			border: 2rpx solid #8B060D;

			.active_vip_1 {
				color: #8B060D !important;
			}

			.active_vip_2 {
				color: #8B060D !important;
			}

			.active_vip_3 {
				color: #8B060D !important;
			}
		}
	}

	.vip_date {
		font-size: 24rpx;
		color: #6A0002;
		padding: 0 28rpx 0 0;
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		// background: url(/static/images/41.png) no-repeat, rgba(248, 248, 248, 1);
		// background-size: 100% auto !important;
		background: #f8f8f8;
	}

	.vip_flex_0 {
		// background: url(/static/images/41.png) no-repeat, #fff;
		background-color: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 30;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.vip_fd0_0_c2_c0 {
		color: #FFFFFF;
		font-size: 28rpx;
		font-weight: 500;
	}

	.vip_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
	}

	.vip_fd0_0_c1_c01 {
		font-size: 34rpx;
		font-weight: 500;
		color: var(--benbenFontColor3);
	}

	.vip_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: var(--benbenFontColor3);
	}

	.vip_fd0_0_c0 {
		width: 180rpx;
	}

	.vip_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}

	.vip_fd1_1 {
		width: 55rpx;
		height: 55rpx;
		border-radius: 55rpx 55rpx 55rpx 55rpx;
		margin: 40rpx 0rpx 0rpx 0rpx;
	}

	.vip_fd1_0_c1 {
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		line-height: 48rpx;
	}

	.vip_flex_311 {
		background: #fff;
		width: 540rpx;
		background-size: 100% auto !important;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 32rpx 24rpx 24rpx 24rpx;
	}

	.vip_fd3_0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #000000;
	}

	.vip_fd3_1 {
		margin: 24rpx 0rpx 40rpx 0rpx;
	}

	::v-deep .vip_fd3_1_c0 {
		width: 750rpx;
		height: 160rpx;
	}

	.vip_flex_password_noActive_fd3_1_c0 {
		border: 1px solid #ccc;
		width: 68rpx;
		height: 68rpx;
		margin: 0rpx 5rpx 0rpx 5rpx;
	}

	.vip_fd3_2_c0 {
		background: #F2F2F2;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-size: 28rpx;
		color: #333;
		width: 234rpx;
		height: 72rpx;
		font-weight: 500;
		line-height: 72rpx;
	}

	.vip_fd3_2_c1 {
		background: #6a0002;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		font-size: 28rpx;
		color: #e6e6e6;
		width: 234rpx;
		height: 72rpx;
		font-weight: 500;
		line-height: 72rpx;
	}

	.vip_flex_password_active_fd3_1_c0 {
		border: 1px solid #409EFF;
		width: 68rpx;
		height: 68rpx;
		margin: 0rpx 5rpx 0rpx 5rpx;
	}

	.vip_fd1_0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		margin: 0rpx 0rpx 16rpx 0rpx;
	}

	.vip_fd1_0 {
		background: #fff;
		width: 540rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background-size: 100% auto !important;
		padding: 28rpx 32rpx 32rpx 32rpx;
	}

	.vip_flex_2_content {
		padding: 24rpx 30rpx 0;
		background: url(/static/images/41.png) no-repeat;
		background-size: 100% 338rpx;
		margin-top: 24rpx;
		position: relative;

		.vip_flex_2_content_bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 338rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.vip_flex_2 {
		// margin: 24rpx 32rpx 0rpx 32rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 0rpx 0rpx 32rpx 0rpx;
		position: relative;
		z-index: 11;

	}

	.vip_fd2_0_c0_c2_c0 {
		color: #333333;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 48rpx;
	}

	.vip_fd2_0_c0_c2 {
		margin: 0rpx 24rpx 0rpx 24rpx;
		color: #333333;
		font-size: 24rpx;
		line-height: 35rpx;
		font-weight: 400;
	}

	.vip_fd2_0_c0_c1 {
		color: #333333;
		font-size: 28rpx;
		font-weight: 400;
		margin: 32rpx 24rpx 24rpx 24rpx;
	}

	.vip_fd2_0_c0_c0_c2_c1 {
		font-size: 34rpx;
		font-weight: 500;
		color: #673300;
	}

	.vip_fd2_0_c0_c0_c2_c0 {
		font-size: 48rpx;
		font-weight: 500;
		color: #673300;
	}

	.vip_fd2_0_c0_c0_c2 {
		margin: 120rpx 0rpx 0rpx 34rpx;
	}

	.vip_fd2_0_c0_c0_c1_c0 {
		color: #673300;
		font-size: 24rpx;
		font-weight: 400;
	}

	.vip_fd2_0_c0_c0_c1 {
		margin: 13rpx 0rpx 0rpx 34rpx;
	}

	.vip_fd2_0_c0_c0_c0_c0 {
		color: #673300;
		font-size: 48rpx;
		font-weight: 500;
		line-height: 73rpx;
	}

	.vip_fd2_0_c0_c0_c0 {
		margin: 33rpx 0rpx 0rpx 34rpx;
		justify-content: space-between;
	}

	.vip_fd2_0_c0_c0 {
		// background: url(/static/images/42.png) no-repeat;
		background-size: 100% auto !important;
		width: 100%;
		height: 320rpx;
	}

	.vip_fd2_0_c0 {
		background: var(--benbenbgColor0);
		// margin: 0rpx 24rpx 0rpx 0rpx;
		background-size: 100% auto !important;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 0rpx 0rpx 32rpx 0rpx;
	}

	.vip_fd2_0 {
		touch-action: none;
		width: 726rpx;
	}

	.vip_flex_3 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 20;
		bottom: calc(32rpx + var(--window-bottom));
	}

	.vip_fd3_0 {
		background: #6A0002;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: #fff;
		width: 638rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: 500;

	}
</style>